<div class="well well-sm">
  <h4>{{ vm.platformSvc.getI18nString(vm.Strings.View.Settings.Sync.Title) }}</h4>
  <div class="panel-content">
    <div class="form-group setting-group" ng-if="!vm.syncEnabled">
      <p class="description text-center"
         ng-bind-html="vm.platformSvc.getI18nString(vm.Strings.View.Settings.NotAvailable)">
      </p>
    </div>
    <div ng-if="vm.syncEnabled">
      <div class="form-group setting-group">
        <label>{{ vm.platformSvc.getI18nString(vm.Strings.View.Settings.Sync.Id.Label) }}</label>
        <div class="setting-value id-url">
          <a title="{{ vm.platformSvc.getI18nString(vm.Strings.View.Settings.Sync.Qr.Show) }}"
             ng-click="vm.utilitySvc.handleEvent(vm.displayQrPanel)" href="">{{ vm.syncId }}</a>
        </div>
        <p class="description">{{ vm.platformSvc.getI18nString(vm.Strings.View.Settings.Sync.Id.Description) }}</p>
      </div>
      <div class="form-group setting-group">
        <div class="buttons">
          <button class="btn btn-default" ng-click="vm.utilitySvc.handleEvent(vm.syncUpdates)"
                  ng-if="!vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName)"
                  ng-disabled="!vm.updatesAvailable">
            {{ vm.platformSvc.getI18nString(vm.Strings.View.Settings.Sync.UpdatesAvailable.Sync) }}
          </button>
          <button class="btn btn-default" ng-click="vm.utilitySvc.handleEvent(vm.disableSync)">
            {{ vm.platformSvc.getI18nString(vm.Strings.View.Settings.Sync.Disable) }}
          </button>
        </div>
        <div class="description updates-available"
             ng-if="vm.updatesAvailable !== undefined && !vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName)">
          <p ng-if="!vm.updatesAvailable">{{ vm.lastUpdated }}</p>
          <p ng-if="vm.updatesAvailable">{{ vm.nextUpdate }}.</p>
        </div>
      </div>
      <api-xbrowsersync-service-info ng-if="vm.selectedServiceType === vm.apiServiceType.xBrowserSync">
      </api-xbrowsersync-service-info>
    </div>
  </div>
</div>

<qr-panel class="darker-overlay animate-fade-in animate-fade-out" close="vm.closeQrPanel" ng-if="vm.displayQr">
</qr-panel>
